<template>
  <view class="tabbar-cart" v-if="$store.state.cart.cartList.length > 0">
    <my-address :nowAddress="nowAddressInfo"></my-address>
    <!-- 底部的边框线 -->
      <image src="/static/cart_border@2x.png" class="address-border"></image>
      <view class="tabbar-cart-title">
        <view class="iconfont icon-a-caigou6"></view>
        <view class="tabbar-cart-text">
          购物车 ({{$store.getters['cart/total']}})
        </view>
      </view>
      <uni-swipe-action >
        <block class="cart-goods-list" v-for="goodsItem in $store.state.cart.cartList" :key="goodsItem.goods_id" >
          <uni-swipe-action-item :right-options="options"  @click="swipeActionClickHandler($event,goodsItem)">
             <my-goods :goodsitem="goodsItem" :showRadio="true" @checked-change="checkedChange" @num-change="numberChangeHandler" :showNub="true">
             </my-goods>
          </uni-swipe-action-item>
        </block>
    </uni-swipe-action>
    <pay-shopping></pay-shopping>
  </view>
  <view class="not-cart" v-else>
     <image src="/static/cart_empty@2x.png" class="not-cart-image"></image>
     <text class="not-cart-text iconfont icon-a-biaoqing6">空空如也~</text>
  </view>
</template>

<script setup>
  // Tabbar栏徽章数量显示
  import {reactive, ref, watch} from 'vue'
  import { onShow,onLoad } from '@dcloudio/uni-app'
  import { useStore } from 'vuex'
  const store = useStore()
  const options = ref([
            {
                text: '收藏',
                iconfont: {
                  icon: 'icon-heart',
                  size: '70',
                  color: '#fff'
                },
                style: {
                    backgroundColor: '#fbc02d'
                }
            }, {
                text: '删除',
                iconfont: {
                  icon: 'icon-shanchu08',
                  size: '50',
                  color: '#fff'
                },
                
                style: {
                    backgroundColor: '#dd524d'
                }
            }
  ])
  // 接收选定的收货地址数据
  const nowAddressInfo = ref({})
  onLoad((options) => {
    if(JSON.stringify(options) !== '{}') {
      console.log(options);
      nowAddressInfo.value = options
    }
  })
  onShow(() => {
    // console.log(option);
    setBadge()
  })
  const setBadge = () => {
    if (store.getters['cart/total'] === 0) return
    uni.setTabBarBadge({
      index: 2,
      text: store.getters['cart/total'] + ''  // 必须是字符串
    })
  }
  const checkedChange = (event) => {
    store.dispatch('cart/updateGoodsState', event)
  }
  const numberChangeHandler = (val) => {
    store.dispatch('cart/updateGoodsCount', val)
  }
  
 const swipeActionClickHandler = (e, goodsItem) => {
    if(e.content.text === '删除') {
      store.dispatch('cart/removeGoodsCart', goodsItem)
    }
    if(e.content.text === '收藏') {
      const iconRusule = options.value.find(item => item.text === '收藏')
      if (iconRusule.iconfont.icon === 'icon-heart') return iconRusule.iconfont.icon = 'icon-heart-filled'
      if(iconRusule.iconfont.icon === 'icon-heart-filled') return iconRusule.iconfont.icon = 'icon-heart'
    }
  }
  
  console.log(store.getters['cart/selectedList'],'444');
  console.log(store.getters['cart/selectedAccount'],'555');
</script>

<style lang="scss">
  .not-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 300rpx;
    .not-cart-image {
      width: 200rpx;
      height: 200rpx;
      margin: 30rpx 0;
    }
    .not-cart-text {
      font-size: 40rpx;
      color: #999;
      font-weight: 600;
      opacity: 0.6;
      .icon-a-biaoqing6 {
        margin-right: 15rpx;
      }
    }
  }
  .tabbar-cart {
     // 让 goods-item 项占满整个屏幕的宽度
      width: 750rpx;
      // 设置盒模型为 border-box
      box-sizing: border-box;
      padding-bottom: 120rpx;
      .address-border {
        width: 100%;
        height: 10rpx;
      }
    .tabbar-cart-title {
      display: flex;
      align-items: center;
      height: 70rpx;
      font-size: 35rpx;
      padding: 0 20rpx;
      .icon-a-caigou6 {
        font-size: 40rpx;
      }
      .tabbar-cart-text {
        margin: 0 10rpx;
      }
    }
  }
</style>
